<?php

/**
 * 注册页面展示
 */

use app\assets\AppAsset;
use \yii\captcha\Captcha;

AppAsset::addCss($this, '@web/css/page/reg-login.css');

?>
    <div id="app">
        <div class="resister-wrap">

            <div class="s-nav">
                <el-row>
                    <el-col :span="24">
                        <div class="logo">
                            <a href="/" class="logo__img"><?=Yii::$app->id?></a>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <div class="title-nav">
                <el-row>
                    <el-col :span="24">
                        <h1 class="login-title">欢迎注册</h1>
                    </el-col>
                </el-row>
            </div>

            <div class="ms-reg-login">
                <el-form :model="registerData" class="el-form ms-content" :rules="rules"
                         ref="registerForm">
                    <el-form-item class="" prop="phone">
                        <div class="el-form-item__content" style="margin-left: 0;">

                            <el-input placeholder="请输入手机号" tabindex="1"
                                      v-model="registerData.phone" size="small">
                            </el-input>
                        </div>
                    </el-form-item>

                    <el-form-item class="" prop="passWord">
                        <div class="el-form-item__content" style="margin-left: 0;">

                            <el-input placeholder="请输入密码，由6-16位英文数字组成" tabindex="2"
                                      v-model="registerData.passWord" type="password"
                                      size="small">
                            </el-input>
                        </div>
                    </el-form-item>

                    <el-form-item class="" prop="mobileCode">
                        <div class="el-form-item__content" style="margin-left: 0;">

                            <el-input placeholder="请输入手机验证码" tabindex="2"
                                      v-model="registerData.mobileCode" type="text"
                                      size="small" class="code-wrapper">
                                <template slot="append">
                                    <div v-if="!isSendMCode" @click="getMobileCode"
                                         class="get-mobile-code pointer text-hover-blue">

                                        <el-button>
                                            获取手机验证码
                                        </el-button>

                                    </div>
                                    <div v-else-if="mCodeSecond > 0" class="get-mobile-code">

                                        <el-button :disabled="isSendMCode"
                                                   class="desc-second-button">
                                            {{mCodeSecond}}秒后重新获取
                                        </el-button>

                                    </div>
                                    <div v-else @click="getMobileCode"
                                         class="get-mobile-code pointer text-hover-blue">

                                        <el-button>
                                            重新获取验证码
                                        </el-button>

                                    </div>
                                </template>
                            </el-input>
                        </div>
                    </el-form-item>

                    <el-form-item class="" prop="code">
                        <div class="el-form-item__content" style="margin-left: 0;">

                            <el-input placeholder="请输入验证码" tabindex="2"
                                      v-model="registerData.code" type="text"
                                      size="small" class="code-wrapper">
                                <template slot="append">
                                    <div class="get-code">
                                        <?= Captcha::widget([
                                            'name' => 'captchaimg',
                                            'captchaAction' => '/reCaptcha.api',
                                            'imageOptions' => [
                                                'id' => 'captchaimg',
                                                'title' => '换一个',
                                                'alt' => '换一个',
                                                'style' => 'cursor:pointer;',
                                                ':src' => 'captcha',
                                                '@click' => 'reCaptcha(this)'
                                            ],
                                            'template' => '{image}'
                                        ]);
                                        //我这里写的跟官方的不一样，因为我这里加了一个参数(login/captcha),这个参数指向你当前控制器名，如果不加这句，就会找到默认的site控制器上去，验证码会一直出不来，在style里是可以写css代码的，可以调试样式  ?>
                                    </div>
                                </template>
                            </el-input>
                        </div>
                    </el-form-item>

                    <el-form-item class="" prop="spread_uid">
                        <div class="el-form-item__content" style="margin-left: 0;">

                            <el-input placeholder="请输入邀请码" tabindex="2"
                                      :disabled="inviterId ? true : false"
                                      v-model="registerData.spread_uid"
                                      size="small">
                            </el-input>
                        </div>
                    </el-form-item>

                    <el-form-item class="re-login-btn">
                        <el-button @click.native="register" :loading="submitLoading"
                                   type="primary" size="medium">
                            注册
                        </el-button>
                    </el-form-item>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item class="agree-form-item" prop="agree">
                                <div class="el-form-item__content" style="margin-left: 0;">
                                    <el-row>
                                        <el-col :span="4">
                                            <el-checkbox v-model="registerData.agree"
                                                         class="agree-button">
                                                同意
                                            </el-checkbox>
                                        </el-col>
                                        <el-col :span="20" class="agree-content-title">
                                            <a v-text="agreeData.title"
                                               @click="regDiaVisible = true">
                                                --
                                            </a>
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item class="sign__tip text-right">
                                <span>已有账号?</span>
                                <a href="/login.html" class="sign__link sign__link--attention"> 直接登录</a>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>

        <el-dialog :title="agreeData.title" :visible.sync="regDiaVisible" width="60%"
                height="20%">
            <div>
                <el-scrollbar class="main-scroller" style="">
                    <div v-html="agreeData.detail"></div>
                </el-scrollbar>
            </div>
        </el-dialog>
    </div>

<?= \app\assets\AppAsset::addScript($this, "@web/js/page/register.js"); ?>
<?=
$this->registerJs('
        var app = new register();
    ');
?>
